<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeiLanBlog~ 你好,世界</title>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            font-family: 'SF Pro Display', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 400px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            transform: translateX(0); /* 默认展开 */
        }

        .container.collapsed {
            transform: translateX(-100%); /* 收起状态 */
        }

        .toggle-button {
            position: fixed;
            top: 10px;
            left: 10px;
            width: 40px;
            height: 40px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1001;
        }

        .toggle-button span {
            display: block;
            width: 30px;
            height: 4px;
            background-color: white;
            margin: 5px 0;
        }

        .menu {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }

        .menu-item {
            cursor: pointer;
            padding: 10px;
            color: #0078d7;
            text-align: center;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .menu-item:hover {
            background-color: #0078d7;
            color: white;
        }

        .search-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .search-box {
            width: 100%;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .search-box:focus {
            border-color: #0078d7;
        }

        .search-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-button svg {
            width: 20px;
            height: 20px;
            fill: #0078d7;
            transition: fill 0.3s ease;
        }

        .search-button:hover svg {
            fill: #0056b3;
        }

        .form-container {
            display: none;
            width: 300px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }

        .form-container.active {
            display: block;
        }

        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-size: 24px;
            font-weight: 600;
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            font-size: 20px;
            color: #666;
            background: none;
            border: none;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            border-color: #0078d7;
        }

        .form-group input:invalid {
            border-color: #ff4d4d;
        }

        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-group button:hover {
            background-color: #0056b3;
        }

        .form-group small {
            color: #666;
            font-size: 12px;
        }

        .form-group.error {
            color: #ff4d4d;
            font-size: 12px;
        }

        .form-container p {
            text-align: center;
            margin-top: 10px;
            color: #0078d7;
            cursor: pointer;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .form-container p:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        .footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }

        .footer a {
            color: #0078d7;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        .quote {
            font-style: italic;
            color: #666;
            margin-top: 10px;
        }
        
        .container {
    max-width: 400px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    transform: translateX(-100%); /* 默认收起 */
}

.container.collapsed {
    transform: translateX(0); /* 展开状态 */
}

.menu-item, .menu a {
    cursor: pointer;
    padding: 10px;
    color: #0078d7;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* 去掉链接默认的下划线 */
}

.menu-item:hover, .menu a:hover {
    background-color: #0078d7;
    color: white;
}

    </style>
</head>
<body>
    <!-- 汉堡菜单按钮 -->
    <button class="toggle-button" id="toggleButton">
        <span></span>
        <span></span>
        <span></span>
    </button>

    <div class="container">
        <!-- 标题 -->
        <div class="header">
            <h1>WeiLanBlog~ 你好,世界</h1>
        </div>

        <!-- 左侧菜单 -->
        <div class="menu">
            <div class="menu-item" id="loginButton">登录</div>
            <div class="menu-item" id="registerButton">注册</div>
            <div class="search-container">
                <input type="text" class="search-box" placeholder="搜索..." id="searchInput">
                <button class="search-button" onclick="performSearch()">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path d="M10 2a8 8 0 105.293 14.707l4.707 4.707 1.414-1.414-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z" fill="currentColor" />
                    </svg>
                </button>
            </div>
    <a href="https://b23.tv/KG4iMia" target="_blank" class="menu-item">首页</a>
    <a href="blog.html" class="menu-item">全部说说</a>
        </div>

        <!-- 登录表单 -->
        <div class="form-container" id="loginContainer">
            <h2>登录 <button class="close-button" onclick="hideLogin()">&times;</button></h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" id="username" placeholder="请输入用户名" required>
                    <small>请输入有效的用户名</small>
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" id="password" placeholder="请输入密码" required>
                    <small>请输入正确的密码</small>
                </div>
                <div class="form-group">
                    <button type="submit">登录</button>
                </div>
            </form>
            <div id="loginErrorMessages" class="error"></div>
            <p onclick="showRegister()">没有账号？点击注册</p>
        </div>

        <!-- 注册表单 -->
        <div class="form-container" id="registerContainer">
            <h2>注册 <button class="close-button" onclick="hideRegister()">&times;</button></h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="newUsername">用户名：</label>
                    <input type="text" id="newUsername" placeholder="请输入用户名" required>
                    <small>请输入有效的用户名</small>
                </div>
                <div class="form-group">
                    <label for="newPassword">密码：</label>
                    <input type="password" id="newPassword" placeholder="请输入密码" required>
                    <small>请输入有效的密码</small>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码：</label>
                    <input type="password" id="confirmPassword" placeholder="请再次输入密码" required>
                    <small id="passwordMatchError" class="error" style="display: none;">两次输入的密码不一致</small>
                </div>
                <div class="form-group">
                    <button type="submit">注册</button>
                </div>
            </form>
            <div id="registerErrorMessages" class="error"></div>
            <p onclick="showLogin()">已有账号？点击登录</p>
        </div>
    </div>

    <!-- 底部访问人数 -->
    <div class="footer">
        <p>访问人数: <span id="visitorCount">0</span></p>
        <p>
            ©2025 本博客由 <a href="https://gitee.com/scicat-team/wei_-lan-blog" target="_blank" class="footer-link">Wei Lan-Blog</a> 构架提供
        </p>
        <p class="quote">
            我和别人的故事很少，却和自己的故事有很多。
        </p>
    </div>

    <!-- JavaScript 逻辑 -->
    <script>
        // 获取相关元素
        const loginButton = document.getElementById('loginButton');
        const registerButton = document.getElementById('registerButton');
        const loginContainer = document.getElementById('loginContainer');
        const registerContainer = document.getElementById('registerContainer');
        const toggleButton = document.getElementById('toggleButton');
        const container = document.querySelector('.container');

        // 显示注册表单，隐藏登录表单
        function showRegister() {
            loginContainer.classList.remove('active');
            registerContainer.classList.add('active');
        }

        // 显示登录表单，隐藏注册表单
        function showLogin() {
            registerContainer.classList.remove('active');
            loginContainer.classList.add('active');
        }

        // 隐藏登录表单
        function hideLogin() {
            loginContainer.classList.remove('active');
        }

        // 隐藏注册表单
        function hideRegister() {
            registerContainer.classList.remove('active');
        }

        // 切换菜单栏展开/收起状态
        function toggleMenu() {
            container.classList.toggle('collapsed');
        }

        // 绑定按钮事件
        if (loginButton) {
            loginButton.addEventListener('click', showLogin);
        }

        if (registerButton) {
            registerButton.addEventListener('click', showRegister);
        }

        if (toggleButton) {
            toggleButton.addEventListener('click', toggleMenu);
        }

// 真正的登录功能
        async function login() {
            // 修改获取用户名和密码的代码
            const username = document.getElementById('username').value; 
            const password = document.getElementById('password').value; 
            try {
                const response = await fetch('process.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                const data = await response.json();
                if (data.success) {
                    // 登录成功，设置登录标识到 localStorage
                    localStorage.setItem('isLoggedIn', 'true');
                    // 重定向到 admin.html
                    window.location.href = 'admin.html';
                } else {
                    alert('用户名或密码错误');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录过程中出现错误，请重试');
            }
        }

        // 模拟注册验证（这里简单示例，实际应用中需要和后端交互验证）
        const registerForm = document.getElementById('registerForm');
        if (registerForm) {
            registerForm.addEventListener('submit', function (e) {
                e.preventDefault();
                const newUsername = document.getElementById('newUsername').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;

                if (newPassword === confirmPassword) {
                    alert('注册成功');
                    registerContainer.classList.remove('active');
                } else {
                    document.getElementById('passwordMatchError').style.display = 'block';
                }
            });
        }
        
        function setRandomBackground() {
    const randomIndex = Math.floor(Math.random() * backgroundImages.length);
    const randomBackground = backgroundImages[randomIndex];
    document.body.style.backgroundImage = `url('${randomBackground}')`;
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundPosition = 'center';
}
// 页面加载时调用设置随机背景图的函数
window.onload = setRandomBackground;

// 切换菜单栏展开/收起状态
function toggleMenu(force) {
    if (force === "collapse") {
        container.classList.add('collapsed'); // 强制收起
    } else {
        container.classList.toggle('collapsed'); // 切换状态
    }
}

// 页面加载时默认收起菜单栏
window.onload = () => {
    toggleMenu("collapse"); // 强制收起
    setRandomBackground(); // 设置随机背景（如果有这个功能）
};

// 记录访问人数
        const visitorCountElement = document.getElementById('visitorCount');
        let visitorCount = localStorage.getItem('visitorCount');
        if (!visitorCount) {
            visitorCount = 1;
        } else {
            visitorCount = parseInt(visitorCount) + 1;
        }
        localStorage.setItem('visitorCount', visitorCount);
        visitorCountElement.textContent = visitorCount;

    </script>
    <!-- 在页面底部 JavaScript 逻辑之前引入 -->
<script src="js/bj.js"></script>
</body>
</html>